<template>
  <div>
    <div class="divcss5" style="border-bottom:3px solid #eee">
     <h5 align="left">我的简历>在线简历>添加简历</h5>
    </div>
    <el-form :label-position="left" label-width="100px" :model="person" :rules="rules" ref="person" class="demo-person">
      <el-row type="flex" class="row-bg">
        <div style="font-size:12px;margin:0px 50px 20px ;width:550px;height:15px;float:left;background-color:rgba(0,255,255,0.1);">
        <div>您好！请在下面各输入框填写您的详细信息，请保证信息的完整性和有效性，谢谢!</div>
        </div>
      </el-row>
      <el-row align="left">
        <el-col :span="1" style="width:180px">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-col>
        <el-col :span="2" style="width:200px">

          <el-form-item label="姓名：" prop="name">
            <el-input style="width:10em" v-model="person.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学历：" prop="education">
            <el-input style="width:10em" v-model="person.education" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="width:250px">
          <el-form-item label="成绩：" prop="grade">
            <el-input style="width:10em" v-model="person.grade" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="城市："  prop="slocation">
            <el-input style="width:10em" v-model="person.slocation" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="width:250px">
          <el-form-item label="预期薪酬：" prop="expectSalary">
            <el-input style="width:10em" v-model="person.expectSalary" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="意向职位：" prop="jobObjective">
            <el-input style="width:10em" v-model="person.jobObjective" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-form-item label-width="100px" label="教育经历：" prop="expedu">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="person.expedu"
          auto-complete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="项目经历：" prop="expPrac">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="person.expPrac"
          auto-complete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="获奖经历：" prop="expAaward">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="person.expAward"
          auto-complete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="技能/语言：" prop="skill">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="person.skill"
          auto-complete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="兴趣特长：" prop="interest">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          v-model="person.interest"
          auto-complete="off">
        </el-input>
      </el-form-item>
       </el-row>
        <el-form-item>
          <el-button @click="resetForm('person')">重置</el-button>
          <el-button type="primary" @click="submitForm('person')">提交</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import fetch from '../api/fetch'  //导入接口
export default {
  data () {
    return {
      formInline: {
        user: ''
      },
      person: {
        imageUrl: '',
        name: '',
        education: '',
        expPrac:'',
        expAward:'',
        grade:'',
        skill: '',
        cvAttach:'',
        slocation: '',
        expectSalary:'',
        jobObjective: '',
        expedu:'',
      },
      rules: {
           name: [
            { required: true, message: '请输入姓名'},
          ],
          education: [
            { required: true, message: '请输入学历'},
          ],
           grade: [
        {required: true,message: '请输入大学成绩'},
          ],
         slocation: [
       {required: true,message: '请输入所在位置'},
          ],
          expectSalary: [
        {required: true,message: '请输入预期薪水'},
          ],
        jobObjective: [
        {required: true,message: '请输入意向职位'},
          ],
          expedu: [
        {required: true,message: '请输入教育经历'},
          ]
          }
    }
  },
    mounted() {
    this.addAnimation()
  },
  methods: {
    addAnimation() {
      let form = document.getElementsByClassName('person')[0]
      form.classList.add('animated')
      form.classList.add('bounceInDown')
    },
      submitForm(formName) {
       let result={
         photo:"13412",
         sid:111,
         education:this.person.education,
         expPrac:this.person.expPrac,
         expAward:this.person.expAward,
         grade:this.person.grade,
         skill:this.person.skill,
         cvAttach:123,
         slocation:this.person.slocation,
         expectSalary:this.person.expectSalary,
         expEdu:this.person.expedu,
        interest: this.person.interest,
        jobObjective:this.person.jobObjective
        }
         this.$confirm('确定提交该职位信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.$refs[formName].validate((valid) => {
          if (valid) {
           fetch
          .CVUpload(result)
          .then(res => {
            console.log(res)     
          if (res.data.code ===200) {
          this.$alert('职位信息已成功提交，请等待管理员审核', '提示',{
            confirmButtonText: '确定',
            callback: action => {
           this.$message({
            type: 'success',
            message:'提交成功'
          });
          }
          });
          } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning"
                  });
                } 
            })
            .catch(e => {
              this.$message({
                message: "提交失败",
                type: "warning"
              });
            });
          } else {
          this.$alert('表单填写不完整请检查', '提示',{
          confirmButtonText: '确定',
          callback: action => {
          this.$message({
          type: 'info',
          message:'提交失败'
          });
          }
        });
            return false;
          }
        });
      })},
            resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.divcss5{
  margin:20px 0;
  color: rgb(144,144,144);
  height: 30px;
  }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
